<template>
  <div class="home">
    <Header />
    <div class="SignStatus SignStatus1" id="SignStatus1">
      <div class="Sign-h"><img src="../assets/standard.png">签约回款情况</div>
      <div class="Sign-b">
        <ul>
          <li>
            <strong>{{BuildingdatasummaryList.annualnetamount}}</strong>
            <span>年度签约金额(亿)</span>
          </li>
          <li class="no-bor-r">
            <strong class="colorbule">{{BuildingdatasummaryList.annualreturnamount}}</strong>
            <span>年度回款金额(亿)</span>
          </li>
          <li class="no-bor-b">
            <strong class="colorgreen">{{BuildingdatasummaryList.monthlynetamount}}</strong>
            <span>月度签约金额(亿)</span>
          </li>
          <li class="no-bor-r no-bor-b">
            <strong class="coloryellow">{{BuildingdatasummaryList.totalmonthlypayment}}</strong>
            <span>月度回款金额(亿)</span>
          </li>
        </ul>
      </div>
      <div class="Sign-text">数据取自明源销售系统，更新至{{dateTableFormat(BuildingdatasummaryList.datatimeCreate,'ymd')}}</div>
    </div>
    <div class="SignStatus SignStatus2" id="SignStatus2">
      <div class="Sign-h"><img src="../assets/sell.png">可售货值情况</div>
      <div class="Sign-b">
        <ol>
          <li>
            <strong class="colorbule">{{BuildingdatasummaryList.totalresources}}</strong>
            <span>总可售资源(亿)</span>
          </li>
          <li>
            <strong>{{BuildingdatasummaryList.saleresources}}</strong>
            <span>工程可售资源(亿)</span>
          </li>
          <li class="no-bor-r">
            <strong class="colorgreen">{{BuildingdatasummaryList.formresources}}</strong>
            <span>取证可售资源(亿)</span>
          </li>

        </ol>
      </div>
      <div class="Sign-text">数据取自经营管理系统及明源销售系统，更新至{{dateTableFormat(BuildingdatasummaryList.datatimeCreate,'ym')}}</div>
    </div>
    <div class="SignStatus SignStatus3" id="SignStatus3">
      <div class="Sign-h"><img src="../assets/layout.png">中国金茂布局</div>
      <div class="Sign-b">
        <ol class="layoutbox">
          <li>
            <strong>{{cityCount}}</strong>
            <span>已进入城市数</span>
          </li>
          <li class="no-bor-r">
            <strong>{{OperationprojectCount}}</strong>
            <span>二级开发项目数</span>
          </li>
        </ol>
      </div>
      <div class="Sign-text">数据取自经营管理系统，更新至{{dateTableFormat(cityDate,'ym')}}</div> 
    </div>
  </div>
</template>
<script>
import Header from '@/components/Header.vue'
import dataservice from '@/services/dataservice.js'
import { addWaterMarker } from './data' 
export default {
  data () {
    return {
      BuildingdatasummaryList: {},
      cityCount: 0,
      OperationprojectCount: 0,
      dataProjectTime: new Date(),
      cityDate:new Date(),
    }
  },
  components: {
    Header
  },
  mounted () { 
    dataservice.getLoginEmail(this.$route).then(userEmail=>{     
      //获取地址栏邮箱 
      if(!userEmail){
        userEmail=this.$cookies.get('UserEmail')
      }
      if(!userEmail){
          //console.warn('暂无登录,邮箱为'+userEmail)
      }
      dataservice.login(userEmail).then(result => {    
        this.$cookies.set('UserEmail',userEmail,'1d')
        //水印  
        addWaterMarker('SignStatus1', decodeURI(this.$cookies.get('UserName'))+this.dateTableFormat(this.dataProjectTime,'ymd'))
        addWaterMarker('SignStatus2', decodeURI(this.$cookies.get('UserName'))+this.dateTableFormat(this.dataProjectTime,'ymd'))
        addWaterMarker('SignStatus3', decodeURI(this.$cookies.get('UserName'))+this.dateTableFormat(this.dataProjectTime,'ymd'))
         
        this.initBuildingdatasummary()
        this.initCityCount()
        this.initOperationprojectCount()
        
      })
    })
  },
  created () {
this.createdUserRecord ()
  },
  methods: {
     // 创建用户访问记录
   async createdUserRecord () {
      let model = {}
      var name = 'Board' + this.$route.query.type
      model = {
        jm_channel: 20,
        jm_boardname: 'Board',
        jm_boardtype: this.$route.query.type,
        jm_address: window.location.href,
        jm_time: this.dateTableFormat(new Date(), 'yyyy-MM-dd'),
        ownerid: this.$cookies.get('UserId')
      }

      let httpResult =await dataservice.createdUserRecord(model, model.ownerid)
      if (!httpResult) { console.log('查看APP端' + name + '错误') }
    },

    dateTableFormat (val, dateFormat) { 
      if (!val) {
        return ''
      }
      var date = new Date(val)  
      if (dateFormat==='ym') {  
      var daysInMonth = new Array([0],[31],[28],[31],[30],[31],[30],[31],[31],[30],[31],[30],[31]);   
     var strYear = date.getFullYear();     
     var strDay = date.getDate();     
     var strMonth = date.getMonth()+1;   
     if(strYear%4 == 0 && strYear%100 != 0){   
        daysInMonth[2] = 29;   
     }   
     if(strMonth - 1 == 0)   
     {   
        strYear -= 1;   
        strMonth = 12;   
     }   
     else  
     {   
        strMonth -= 1;   
     }   
     strDay = daysInMonth[strMonth] >= strDay ? strDay : daysInMonth[strMonth];   
     if(strMonth<10)     
     {     
        strMonth='0'+strMonth;     
     }   
     if(strDay<10)     
     {     
        strDay='0'+strDay;     
     }    
    let datastr = strYear+'-'+strMonth;   
     return datastr; 
      }else{
         return dataservice.formatDate(date, 'yyyy-MM-dd') 
      } 
    },
    // 初始楼栋汇总
    initBuildingdatasummary () {
      var entParam = {
        indicatorName: '',
        strWhere: '',
        type: 'sumMoney'
      }
      dataservice.dataRouter('execute',
        {
          uri: 'jm_unifiedaction',
          entData: {
            functionname: 'accumulativemoeny_dashboard',
            params: JSON.stringify(entParam)
          },
          userid: this.$cookies.get('UserId') }).then(HttpResult => {
        if (HttpResult.status === 200 && HttpResult.data.res === 'success') {
          var results = JSON.parse(HttpResult.data.resData).statemessage
          if (results != '[]') {
            this.BuildingdatasummaryList = JSON.parse(results)[0] 
            this.BuildingdatasummaryList.monthlynetamount=this.BuildingdatasummaryList.monthlynetamount.toFixed(1)
            this.BuildingdatasummaryList.totalmonthlypayment=this.BuildingdatasummaryList.totalmonthlypayment.toFixed(1)
            this.BuildingdatasummaryList.annualreturnamount=this.BuildingdatasummaryList.annualreturnamount.toFixed(1)
            this.BuildingdatasummaryList.annualnetamount=this.BuildingdatasummaryList.annualnetamount.toFixed(1)
         }
        }
      })
    },
    // 城市总数
    initCityCount () {
      dataservice.getCityCount().then(HttpResult => {
        if (HttpResult.status === 200 && HttpResult.data.res === 'success') { 
          var resData = JSON.parse(HttpResult.data.resData).results 
          let results=JSON.parse(resData)  
          this.cityCount = results.count 
        }
      })
    },
    // 项目总数
    initOperationprojectCount () {
      dataservice.getOperationprojectCount().then(HttpResult => {
        if (HttpResult.status === 200 && HttpResult.data.res === 'success') {
          var resData = JSON.parse(HttpResult.data.resData).results 
          this.OperationprojectCount = JSON.parse(resData).count 
        }
      })
    }
    // 获取签约回款情况时间
    // initSignCreateon () {
    //   var entParam = {
    //     indicatorName: '',
    //     strWhere: " jm_indicatorname='年度净签金额' or jm_indicatorname='月度净签金额' or jm_indicatorname='年度回款累计' or jm_indicatorname='月度回款累计' ",
    //     type: 'datetimeCreate'
    //   }
    //    dataservice.dataRouter('execute',
    //     {
    //       uri: 'jm_unifiedaction',
    //       entData: {
    //         functionname: 'accumulativemoeny_dashboard',
    //         params: JSON.stringify(entParam)
    //       },
    //       userid: this.$cookies.get('UserId') }).then(HttpResult => {
    //     if (HttpResult.status === 200 && HttpResult.data.res === 'success') {
    //       var results = JSON.parse(HttpResult.data.resData).statemessage
    //       if (results != '[]') {
    //         this.BuildingdatasummaryList = JSON.parse(results)[0]
    //       }
    //     }
    //   }
    //   )
    // }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@colorbule: #4fa5ff;
@colorgreen: #61b64a;
@coloryellow: #cba646;
@basecolor: #b9cadb;
.colorbule {
  color: @colorbule !important;
}
.colorgreen {
  color: @colorgreen !important;
}
.coloryellow {
  color: @coloryellow !important;
}
.SignStatus {
  background: #32466d;
  margin: 0.5rem;
  padding: 0.5rem;
  .Sign-h {
    text-align: left;
    color: #c3e0ff;  
    font-size: 1rem; 
    font-weight:normal;
    img {
      width: 1rem;
      vertical-align: middle;
      margin-right: 0.5rem;
    }
  }
  .Sign-b {
    ul {
      overflow: hidden;
      li {
        width: 50%;
        float: left;
        border-bottom: 1px solid #273c64;
        border-right: 1px solid #273c64;
        box-sizing: border-box;
        padding: 1rem 0px;
        strong {
          display: block;
          font-size: 1.375rem;
          color: #c3e0ff;
          font-weight: normal;
           font-family: PingFangSC-Semibold;
          //font-weight: normal;
          // margin-bottom: 0.5rem;
        }
        span {
          // font-size: 0.625rem;
          font-size: 0.90rem;
          color: #c3e0ff;
        }
      }
      .no-bor-r {
        border-right: 0 none;
      }
      .no-bor-b {
        border-bottom: 0 none;
      }
    }
    ol {
      overflow: hidden;
      padding-top: 0.785rem;
      li {
        width: 33.33%;
        float: left;
        box-sizing: border-box;
        border-right: 1px solid #e3edff;
        strong {
          display: block;
          // color: #c3e0ff;
          // font-size: 1.375rem;
          // font-weight: normal;
          font-size: 1.375rem;
          color: #c3e0ff; 
          font-weight: normal;
          font-family: PingFangSC-Semibold;  
        }
        span {
          // font-size: 0.625rem;
          font-size: 0.90rem;	
          color: #c3e0ff;
        }
      }
      .no-bor-r {
        border-right: 0 none;
      }
    }
    .layoutbox {
      li {
        width: 50%;
        border-color: #273c64;
      }
    }
  }
  .Sign-text {
    text-align: right;
    font-size: 0.625rem;
    color: @basecolor;
    padding: 1rem 0 0.175rem;
  }
}
@media screen and (min-width: 200px) and (max-width: 800px) {
  .SignStatus1 {
    height: calc(40% - 30px);
    margin-bottom: 1rem;
  }
  .SignStatus2 {
    height: calc(25% - 30px);
    margin-bottom: 1rem;
  }
  .SignStatus3 {
    height: calc(25% - 30px);
  }
}
/*.SignStatus .Sign-h i{background:url(../assets/logo.png);display: inline-block;} */
</style>
